<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>工序管理API测试</span>
        </div>
      </template>
      
      <div class="button-container">
        <el-button type="primary" @click="testListProcess">获取工序列表</el-button>
        <el-button type="success" @click="testGetProcess">获取工序详情</el-button>
        <el-button type="warning" @click="testAddProcess">添加工序</el-button>
        <el-button type="info" @click="testUpdateProcess">更新工序</el-button>
        <el-button type="danger" @click="testDelProcess">删除工序</el-button>
      </div>

      <div class="result-container">
        <h3>测试结果</h3>
        <el-input
          type="textarea"
          :rows="15"
          placeholder="API响应将显示在这里"
          v-model="apiResult"
          readonly
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { listProcess, getProcess, delProcess, addProcess, updateProcess } from "@/api/qep/process";

export default {
  name: "ProcessApiTest",
  data() {
    return {
      apiResult: '',
      testProcessId: null
    };
  },
  methods: {
    logResult(title, response) {
      this.apiResult = `${title}\n${JSON.stringify(response, null, 2)}\n\n${this.apiResult}`;
    },
    
    logError(title, error) {
      this.apiResult = `${title} - 错误\n${error.message || JSON.stringify(error)}\n\n${this.apiResult}`;
      console.error(error);
    },
    
    async testListProcess() {
      try {
        const query = {
          pageNum: 1,
          pageSize: 10
        };
        const response = await listProcess(query);
        this.logResult("获取工序列表", response);
        
        // 保存第一个工序的ID用于后续测试
        if (response.rows && response.rows.length > 0) {
          this.testProcessId = response.rows[0].id;
        }
      } catch (error) {
        this.logError("获取工序列表", error);
      }
    },
    
    async testGetProcess() {
      if (!this.testProcessId) {
        this.apiResult = "请先获取工序列表以获取工序ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        const response = await getProcess(this.testProcessId);
        this.logResult(`获取工序详情 (ID: ${this.testProcessId})`, response);
      } catch (error) {
        this.logError("获取工序详情", error);
      }
    },
    
    async testAddProcess() {
      try {
        const testProcess = {
          code: "TEST-" + Date.now(),
          name: "测试工序-" + new Date().toLocaleTimeString(),
          typeId: 1, // 请确保此ID存在
          description: "API测试创建的工序",
          standardTime: 10.0,
          status: 1
        };
        
        const response = await addProcess(testProcess);
        this.logResult("添加工序", response);
        
        // 刷新列表以查看新添加的工序
        await this.testListProcess();
      } catch (error) {
        this.logError("添加工序", error);
      }
    },
    
    async testUpdateProcess() {
      if (!this.testProcessId) {
        this.apiResult = "请先获取工序列表以获取工序ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        // 先获取当前工序信息
        const currentProcess = await getProcess(this.testProcessId);
        const processData = currentProcess.data;
        
        // 更新描述字段
        processData.description = "已更新 - " + new Date().toLocaleTimeString();
        
        const response = await updateProcess(processData);
        this.logResult(`更新工序 (ID: ${this.testProcessId})`, response);
        
        // 刷新详情以验证更新
        await this.testGetProcess();
      } catch (error) {
        this.logError("更新工序", error);
      }
    },
    
    async testDelProcess() {
      if (!this.testProcessId) {
        this.apiResult = "请先获取工序列表以获取工序ID\n\n" + this.apiResult;
        return;
      }
      
      try {
        const response = await delProcess(this.testProcessId);
        this.logResult(`删除工序 (ID: ${this.testProcessId})`, response);
        this.testProcessId = null;
        
        // 刷新列表以验证删除
        await this.testListProcess();
      } catch (error) {
        this.logError("删除工序", error);
      }
    }
  }
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-container {
  margin-bottom: 20px;
}

.button-container .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.result-container {
  margin-top: 20px;
}
</style> 